ajax

第 1 章：原生 AJAX
- 1.1 AJAX 简介
  - AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。
  - 通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
  - AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。
- 1.2 XML 简介
  - XML 可扩展标记语言。
  - XML 被设计用来传输和存储数据。
  - XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。
  - 现在已经被 JSON 取代了。
- 1.3 AJAX 的特点
  - 1.3.1 AJAX 的优点
    
    1) 可以无需刷新页面而与服务器端进行通信。
    
    2) 允许你根据用户事件来更新部分页面内容。
  - 1.3.2 AJAX 的缺点
    
    1) 没有浏览历史，不能回退
    
    2) 存在跨域问题(同源)
    
    3) SEO (搜索引擎优化) 不友好
- HTTP
  - HTTP
    
    HTTP（hypertext transport protocol）协议『超文本传输协议』，协议详细规定了浏览器和万维网服务器之间互相通信的规则。
    
    约定, 规则
  - ## 请求报文
    
    行 POST /s?ie=utf-8 HTTP/1.1
    
    头 Host: atguigu.com
    
    Cookie: name=guigu
    
    Content-type: application/x-www-form-urlencoded
    
    User-Agent: chrome 83
    
    空行
    
    体 username=admin&password=admin
  - ## 响应报文
    
    行 HTTP/1.1 200 OK
    
    头 Content-Type: text/html;charset=utf-8
    
    Content-length: 2048
    
    Content-encoding: gzip
    
    空行
    
    体 <html>
    
    <head>
    
    </head>
    
    <body>
    
    <h1>尚硅谷</h1>
    
    </body>
    
    </html>
    
    响应行
    
    * 404
    
    * 403
    
    * 401
    
    * 500
    
    * 200
- 1.4 AJAX 的使用
  - 1.4.1 核心对象
    
    XMLHttpRequest，AJAX 的所有操作都是通过该对象进行的。
  - 1.4.2 使用步骤
    
    1) 创建 XMLHttpRequest 对象
    
    var xhr = new XMLHttpRequest();
    
    2)设置请求信息
    
    xhr.open(method, url);
    
    //可以设置请求头，一般不设置
    
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    
    3)发送请求
    
    xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用
    
    4)接收响应
    
    //xhr.responseXML接收 xml 格式的响应数据
    
    //xhr.responseText
    
    接收文本格式的响应数据
    
    xhr.onreadystatechange = function (){ if(xhr.readyState == 4 && xhr.status == 200){ var text = xhr.responseText; console.log(text); } }
    
    案例
    
    GET.html
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #result { width: 200px; height: 100px; border: solid 1px pink; } </style> </head> <body> <button>点击发送请求</button> <div id="result"></div> <script> var btn = document.querySelector("button"); var result = document.querySelector("#result"); btn.onclick = function () { //1.创建对象 const xhr = new XMLHttpRequest(); //2.初始化设置请求方法和url xhr.open('GET', 'http://127.0.0.1:8000/server'); // 3.发送 xhr.send(); // 4.事件绑定处理服务端返回的结果 //on when 当..时候 //readystate 是xhr对象中的属性,表示状态 0 1 2 3 4 //change 改变 xhr.onreadystatechange = function () { //判断响应状态码 200 404 403 401 500 //2xx 200多的都是成功 if (xhr.status >= 200 && xhr.status < 300) { *//处理结果行头空行 * *//1.相应* *// console.log(xhr.status); //状态码* *// console.log(xhr.statusText); //状态字符串* *// console.log(xhr.getAllResponseHeaders()); //所有响应头* *// console.log(xhr.response);* result.innerHTML = xhr.response; } } } </script> </body> </html>
    
    server.js
    
    //1.引入express const express = require('express'); //2.创建应用对象 const app = express(); // 3.创建路由规则 //request 是对请求报文的封装 //response 是对相应报文的封装 app.get('/server', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应 response.send('HELLO1'); }) // 4.监听端口启动服务 app.listen(8000, () => { console.log("服务已经启动,8000 端口监听中...."); })
    
    总结
    
    打开终端
    
    nodemon.cmd server.js
    
    监听端口启动服务
  - 1.4.3 解决 IE 缓存问题
    
    问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
    
    解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址即可避免缓存问题
    
    xhr.open("get","/testAJAX?t="+Date.now());
    
    案例
    
    IE缓存问题.html
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #result { width: 200px; height: 100px; border: solid 1px pink; } </style> </head> <body> <button>点击发送请求</button> <div id="result"></div> <script> var btn = document.querySelector("button"); var result = document.querySelector("#result"); btn.onclick = function () { //1.创建对象 const xhr = new XMLHttpRequest(); //2.初始化设置请求方法和url xhr.open('GET', 'http://127.0.0.1:8000/ie?t=' + Date.now()); // 3.发送 xhr.send(); // 4.事件绑定处理服务端返回的结果 xhr.onreadystatechange = function () { //判断响应状态码 200 404 403 401 500 //2xx 200多的都是成功 if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { *//处理结果行头空行 * *//1.相应* *// console.log(xhr.status); //状态码* *// console.log(xhr.statusText); //状态字符串* *// console.log(xhr.getAllResponseHeaders()); //所有响应头* *// console.log(xhr.response);* result.innerHTML = xhr.response; } } } } </script> </body> </html>
    
    server.js
    
    //1.引入express const express = require('express'); //2.创建应用对象 const app = express(); // 3.创建路由规则 //request 是对请求报文的封装 //response 是对相应报文的封装 app.get('/server', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', ''); *//设置响应* *response*.send('HELLO1'); }) app.get('/ie', (*request*, *response*) => { *//设置响应头设置允许跨域* *response*.setHeader('Access-Control-Allow-Origin', ''); //设置响应 response.send('hello ie2'); }) // 4.监听端口启动服务 app.listen(8000, () => { console.log("服务已经启动,8000 端口监听中...."); })
  - 1.4.4 AJAX 请求状态
    
    xhr.readyState 可以用来查看请求当前的状态
    
    https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState
    
    0:表示 XMLHttpRequest 实例已经生成，但是 open()方法还没有被调用。
    
    1:表示 send()方法还没有被调用，仍然可以使用 setRequestHeader()，设定 HTTP请求的头信息。
    
    2:表示 send()方法已经执行，并且头信息和状态码已经收到。
    
    3:表示正在接收服务器传来的 body 部分的数据。
    
    4:表示服务器数据已经完全接收，或者本次接收已经失败了
  - 案例
    
    超时与网络异常问题
    
    代码
    
    html
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #result { width: 200px; height: 100px; border: solid 1px pink; } </style> </head> <body> <button>点击发送请求</button> <div id="result"></div> <script> var btn = document.querySelector("button"); var result = document.querySelector("#result"); btn.onclick = function () { //1.创建对象 const xhr = new XMLHttpRequest(); //超时设置2s设置 xhr.timeout = 2000; //超时回调 xhr.ontimeout = function () { alert("网络异常,请稍后再试!!"); } //网络异常回调 xhr.onerror = function () { alert("你的网络视乎出了问题"); } //2.初始化设置请求方法和url xhr.open('GET', 'http://127.0.0.1:8000/delay'); // 3.发送 xhr.send(); // 4.事件绑定处理服务端返回的结果 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status >= 200 && xhr.status < 300) { result.innerHTML = xhr.response; } } } } </script> </body> </html>
    
    js
    
    //1.引入express const express = require('express'); //2.创建应用对象 const app = express(); // 3.创建路由规则 //request 是对请求报文的封装 //response 是对相应报文的封装 app.get('/server', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', ''); *//设置响应* *response*.send('HELLO1'); }) *//针对IE缓存* app.get('/delay', (*request*, *response*) => { *//设置响应头设置允许跨域* *response*.setHeader('Access-Control-Allow-Origin', ''); //设置响应 setTimeout(() => { response.send('延迟相应'); }, 3000) }) //延迟响应 app.get('/ie', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应 response.send('hello ie2'); }) // 4.监听端口启动服务 app.listen(8000, () => { console.log("服务已经启动,8000 端口监听中...."); })
    
    取消请求
    
    x.abort();
    
    代码
    
    html
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>发送请求</button> <button>取消发送请求</button> <script> const btns = document.querySelectorAll("button"); let x = null; btns[0].onclick = function () { x = new XMLHttpRequest(); x.open("GET", 'http://127.0.0.1:8000/delay'); x.send(); } // 取消请求 btns[1].onclick = function () { x.abort(); } </script> </body> </html>
    
    js
    
    //1.引入express const express = require('express'); //2.创建应用对象 const app = express(); // 3.创建路由规则 //request 是对请求报文的封装 //response 是对相应报文的封装 app.get('/server', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', ''); *//设置响应* *response*.send('HELLO1'); }) *//针对IE缓存* app.get('/delay', (*request*, *response*) => { *//设置响应头设置允许跨域* *response*.setHeader('Access-Control-Allow-Origin', ''); //设置响应 setTimeout(() => { response.send('延迟相应'); }, 3000) }) //延迟响应 app.get('/ie', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应 response.send('hello ie2'); }) // 4.监听端口启动服务 app.listen(8000, () => { console.log("服务已经启动,8000 端口监听中...."); })
    
    重复请求问题
    
    设置一个旗帜 let isSending = false; 判断是不是在发送中
    
    html
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>发送请求</button> <button>取消发送请求</button> <script> const btns = document.querySelectorAll("button"); let x = null; let isSending = false; btns[0].onclick = function () { if (isSending) { x.abort(); } x = new XMLHttpRequest(); isSending = true; x.open("GET", 'http://127.0.0.1:8000/delay'); x.send(); x.onreadystatechange = function () { if (x.readyState === 4) { isSending = false; } } } // 取消请求 btns[1].onclick = function () { x.abort(); } </script> </body> </html>
    
    js
    
    //1.引入express const express = require('express'); //2.创建应用对象 const app = express(); // 3.创建路由规则 //request 是对请求报文的封装 //response 是对相应报文的封装 app.get('/server', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', ''); *//设置响应* *response*.send('HELLO1'); }) *//针对IE缓存* app.get('/delay', (*request*, *response*) => { *//设置响应头设置允许跨域* *response*.setHeader('Access-Control-Allow-Origin', ''); //设置响应 setTimeout(() => { response.send('延迟相应'); }, 3000) }) //延迟响应 app.get('/ie', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', '*'); //设置响应 response.send('hello ie2'); }) // 4.监听端口启动服务 app.listen(8000, () => { console.log("服务已经启动,8000 端口监听中...."); })
第 2 章：jQuery 中的 AJAX
- 2.1 get 请求
  - $.get(url, [data], [callback], [type])
  - url:请求的 URL 地址。
  - data:请求携带的参数。
  - callback:载入成功时回调函数。
  - type:设置返回内容格式，xml, html, script, json, text, _default。
- 2.2 post 请求
  - $.post(url, [data], [callback], [type])
  - url:请求的 URL 地址。
  - data:请求携带的参数。
  - callback:载入成功时回调函数。
  - type:设置返回内容格式，xml, html, script, json, text, _default。
  - 代码
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>  <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> </head> <body> <div class="container"> <h2 class="page-header">jQuery发送AJAX请求 </h2> <button class="btn btn-primary">GET</button> <button class="btn btn-danger">POST</button> <button class="btn btn-info">通用型方法ajax</button> </div> <script> .get('http://127.0.0.1:8000/jquery', { a: 100, b: 200 }, function (data) { console.log(data); }) }) .post('http://127.0.0.1:8000/jquery', { a: 100, b: 200 }, function (data) { console.log(data); }); }); </script> </body> </html>
    
    js
    
    //1.引入express const express = require('express'); //2.创建应用对象 const app = express(); // 3.创建路由规则 //request 是对请求报文的封装 //response 是对相应报文的封装 app.get('/server', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', ''); *//设置响应* *response*.send('HELLO1'); }) *//针对IE缓存* app.get('/delay', (*request*, *response*) => { *//设置响应头设置允许跨域* *response*.setHeader('Access-Control-Allow-Origin', ''); //设置响应 setTimeout(() => { response.send('延迟相应'); }, 3000) }) //延迟响应 app.get('/ie', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', ''); *//设置响应* *response*.send('hello ie2'); }) *//jquery get post ajax* app.all('/jquery', (*request*, *response*) => { *//设置响应头设置允许跨域* *response*.setHeader('Access-Control-Allow-Origin', ''); //设置响应 response.send('HELLO JQUERY AJAX'); }) // 4.监听端口启动服务 app.listen(8000, () => { console.log("服务已经启动,8000 端口监听中...."); })
- 2.3 ajax
  - ＄.ajax() 方法中有很多属性
  - 代码
    
    html
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>  <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> </head> <body> <div class="container"> <h2 class="page-header">jQuery发送AJAX请求 </h2> <button class="btn btn-primary">GET</button> <button class="btn btn-danger">POST</button> <button class="btn btn-info">通用型方法ajax</button> </div> <script> .get('http://127.0.0.1:8000/jquery', { a: 100, b: 200 }, function (data) { console.log(data); }) }) .post('http://127.0.0.1:8000/jquery', { a: 100, b: 200 }, function (data) { console.log(data); }); }); $('button').eq(2).click(function () { ＄.ajax({ //url url: 'http://127.0.0.1:8000/jquery', //参数 data: { a: 100, b: 200 }, //请求类型 type: 'GET', //响应体结果 dataType: 'json', //成功的回调 success: function (data) { console.log(data); }, //超时时间 timeout: 2000, //失败的回调 error: function () { console.log('出错啦!!'); }, //头信息 headers: { c: 300, d: 400 } }); }); </script> </body> </html>
    
    js
    
    //1.引入express const express = require('express'); //2.创建应用对象 const app = express(); // 3.创建路由规则 //request 是对请求报文的封装 //response 是对相应报文的封装 app.get('/server', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', ''); *//设置响应* *response*.send('HELLO1'); }) *//针对IE缓存* app.get('/delay', (*request*, *response*) => { *//设置响应头设置允许跨域* *response*.setHeader('Access-Control-Allow-Origin', ''); //设置响应 setTimeout(() => { response.send('延迟相应'); }, 3000) }) //延迟响应 app.get('/ie', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', ''); *//设置响应* *response*.send('hello ie2'); }) *//jQuery 服务* app.all('/jquery-server', (*request*, *response*) => { *//设置响应头设置允许跨域* *response*.setHeader('Access-Control-Allow-Origin', ''); response.setHeader('Access-Control-Allow-Headers', '*'); // response.send('Hello jQuery AJAX'); const data = { name: '尚硅谷' }; response.send(JSON.stringify(data)); }); // 4.监听端口启动服务 app.listen(8000, () => { console.log("服务已经启动,8000 端口监听中...."); })
第 3 章：axios工具
- axios是vue和react推荐使用的ajax工具
- 使用axios函数发送请求
- 代码
  - html
    
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script> </head> <body> <button>get</button> <button>post</button> <button>ajax</button> <script> //配置 baseURL axios.defaults.baseURL = 'http://127.0.0.1:8000'; const btns = document.querySelectorAll('button'); btns[0].onclick = function () { //GET请求 axios.get('/axios-server', { //url 参数 params: { id: 100, vip: 7 }, headers: { age: 20, name: 'wang' } }).then(value => { console.log(value); }) } btns[1].onclick = function () { axios.post('/axios-server', { username: 'admin', password: 'admin' }, { //url * params: { id: 200, vip: 9 }, *//请求头参数 headers: { height: 180, weight: 180, } }); } btns[2].onclick = function () { axios({ //请求方法 method: 'POST', //url url: '/axios-server', //url参数 params: { vip: 10, level: 30 }, //头信息 headers: { a: 100, b: 200 }, //请求体参数 data: { username: 'admin', password: 'admin', } }).then(response => { console.log(response); console.log(response.status); }) } </script> </body> </html>
  - js
    
    //1.引入express const express = require('express'); //2.创建应用对象 const app = express(); // 3.创建路由规则 //request 是对请求报文的封装 //response 是对相应报文的封装 app.get('/server', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', ''); *//设置响应* *response*.send('HELLO1'); }) *//针对IE缓存* app.get('/delay', (*request*, *response*) => { *//设置响应头设置允许跨域* *response*.setHeader('Access-Control-Allow-Origin', ''); //设置响应 setTimeout(() => { response.send('延迟相应'); }, 3000) }) //延迟响应 app.get('/ie', (request, response) => { //设置响应头设置允许跨域 response.setHeader('Access-Control-Allow-Origin', ''); *//设置响应* *response*.send('hello ie2'); }) *//jQuery 服务* app.all('/jquery-server', (*request*, *response*) => { *//设置响应头设置允许跨域* *response*.setHeader('Access-Control-Allow-Origin', ''); response.setHeader('Access-Control-Allow-Headers', ''); *// response.send('Hello jQuery AJAX');* const data = { name: '尚硅谷' }; *response*.send(JSON.stringify(data)); }); *//axios 服务* app.all('/axios-server', (*request*, *response*) => { *//设置响应头设置允许跨域* *response*.setHeader('Access-Control-Allow-Origin', ''); response.setHeader('Access-Control-Allow-Headers', '*'); // response.send('Hello jQuery AJAX'); const data = { name: '尚硅谷' }; response.send(JSON.stringify(data)); }); // 4.监听端口启动服务 app.listen(8000, () => { console.log("服务已经启动,8000 端口监听中...."); })
第 4 章：fetch工具 (使用较少)
- fetch发送ajax请求
  
  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>fetch 发送 AJAX请求</title> </head> <body> <button>AJAX请求</button> <script> //文档地址 //https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch const btn = document.querySelector('button'); btn.onclick = function(){ fetch('http://127.0.0.1:8000/fetch-server?vip=10', { //请求方法 method: 'POST', //请求头 headers: { name:'atguigu' }, //请求体 body: 'username=admin&password=admin' }).then(response => { // return response.text(); return response.json(); }).then(response=>{ console.log(response); }); } </script> </body> </html>
第 5 章：跨域
- 5.1 同源策略
  - 同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。
  - 同源：协议、域名、端口号必须完全相同。
  - 违背同源策略就是跨域
  - ajax是默认遵守同源策略的
- 5.2 如何解决跨域
  - 5.2.1 JSONP
    
    1) JSONP 是什么
    
    JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。
    
    2)JSONP 怎么工作的？
    
    在网页有一些标签天生具有跨域能力，比如：img link iframe script。
    
    JSONP 就是利用 script 标签的跨域能力来发送请求的。
    
    3)JSONP 的使用
    
    1.动态的创建一个 script 标签
    
    var script = document.createElement("script");
    
    2.设置 script 的 src，设置回调函数
    
    script.src = "http://localhost:3000/testAJAX?callback=abc";
    
    function abc(data) {
    
    alert(data.name);
    
    };
    
    3.将 script 添加到 body 中
    
    document.body.appendChild(script);
    
    4.服务器中路由的处理
    
    router.get("/testAJAX" , function (req , res) {
    
    console.log("收到请求");
    
    var callback = req.query.callback;
    
    var obj = {
    
    name:"孙悟空",
    
    age:18
    
    }
    
    res.send(callback+"("+JSON.stringify(obj)+")");
    
    });
  - 5.2.2 CORS
    
    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
    
    1) CORS 是什么？
    
    CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
    
    2) CORS 怎么工作的？
    
    CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
    
    3) CORS 的使用
    
    主要是服务器端的设置：
    
    router.get("/testAJAX" , function (req , res) {
    
    //通过 res 来设置响应头，来允许跨域请求
    
    //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
    
    res.set("Access-Control-Allow-Origin","*");
    
    res.send("testAJAX 返回的响应");
    
    });